<template>
<el-card class="box-card">
  <el-form :inline="true" class="demo-form-inline my-category">
    <el-form-item label="一级分类">
      <el-select v-model="category1Id" placeholder="请选择">
        <el-option v-for="c1 in categoryStore.category1List" :key="c1.id" :label="c1.name" :value="c1.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="二级分类">
      <el-select placeholder="请选择" v-model="category2Id">
        <el-option v-for="c2 in categoryStore.category2List" :key="c2.id" :label="c2.name" :value="c2.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="三级分类">
      <el-select placeholder="请选择" v-model="category3Id">
        <el-option v-for="c3 in categoryStore.category3List" :key="c3.id" :label="c3.name" :value="c3.id" />
      </el-select>
    </el-form-item>
    <!-- 按钮 
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Query</el-button>
    </el-form-item>-->
  </el-form>
</el-card>
</template>
<script lang="ts">
export default {
  name: 'CategorySelector'
}
</script>
<script lang="ts" setup>
import { reactive,onMounted,computed } from 'vue'
//引入store
import { useCategoryListStore } from '@/stores/categoryList'
//生成store实例，才能用它
const categoryStore = useCategoryListStore()
// 1. 页面挂载完成之后要发送请求获取一级导航数据
onMounted(async () => {
  //调用store实例里action里的方法 发请求获取一级导航数据
  categoryStore.getCategory1ListData()
})

// 切换一级导航分类时，立即发送请求 获取二级导航 数据
const category1Id = computed<number>({
  get(){
    return categoryStore.category1Id as number
  },
  set(val: number){
    // 一级导航一切换，就调用函数，获取当前一级分类对应的二级分类数据
    categoryStore.getCategory2ListData(val)
  },
})
// 二级导航一切换，立即获取三级导航分类数据
const category2Id = computed({
  get(){
    return categoryStore.category2Id as number
  },
  set(val:number){
    // 只要一修改了二级导航分类，就调用函数，获取当前二级分类对应的三级分类数据
    categoryStore.getCategory3ListData(val)
  }
})
// 当三级导航发生改变的时候，要获取属性列表
const category3Id = computed({
  get() {
    return categoryStore.category3Id as number
  },
  set(val: number) {
    categoryStore.setCategory3Id(val)
  }
})





</script>


<style scoped lang="scss">
.my-category {
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>